<template>
  <div class="missing-privacy-container">
    <!-- 模块标题 -->
    <div class="module-header">
      <el-icon class="header-icon"><Lock /></el-icon>
      <h1>失踪信息隐私管理中心</h1>
      <el-tag type="danger" effect="dark" class="sensitivity-tag">敏感信息控制区</el-tag>
    </div>

    <!-- 主设置区域 -->
    <div class="privacy-main">
      <!-- 修复后的左侧导航 -->
      <div class="setting-nav">
        <div
          v-for="nav in navItems"
          :key="nav.id"
          :class="['nav-item', { active: activeNav === nav.id }]"
          @click="activeNav = nav.id"
        >
          <component :is="nav.icon" class="nav-icon" />
          <span class="nav-label">{{ nav.label }}</span>
        </div>
      </div>

      <!-- 右侧设置内容 -->
      <div class="setting-content">
        <!-- 基本信息显示 -->
        <div v-show="activeNav === 'basic'" class="setting-section">
          <h2 class="section-title">
            <el-icon><InfoFilled /></el-icon>
            基本信息显示控制
          </h2>

          <div class="setting-card danger-zone">
            <div class="setting-item">
              <label class="item-label">失踪者信息显示级别</label>
              <div class="info-level-buttons">
                <el-button
                  :type="settings.infoLevel === 'full' ? 'danger' : 'default'"
                  @click="settings.infoLevel = 'full'"
                  title="完整显示：显示所有信息，包括身份证号和住址"
                >
                  完整显示
                </el-button>
                <el-button
                  :type="settings.infoLevel === 'partial' ? 'danger' : 'default'"
                  @click="settings.infoLevel = 'partial'"
                  title="部分隐藏：隐藏部分敏感信息"
                >
                  部分隐藏
                </el-button>
                <el-button
                  :type="settings.infoLevel === 'encrypted' ? 'danger' : 'default'"
                  @click="settings.infoLevel = 'encrypted'"
                  title="加密显示：所有信息加密处理"
                >
                  加密显示
                </el-button>
              </div>
              <div class="item-tip">
                <el-icon class="tip-icon"><Warning /></el-icon>
                控制身份证号、住址等敏感信息的显示方式
              </div>
            </div>

            <div class="setting-item">
              <label class="item-label">紧急联系方式</label>
              <div class="switch-group">
                <el-switch
                  v-model="settings.showPhone"
                  active-text="显示电话"
                  inactive-text="隐藏电话"
                  inline-prompt
                  size="large"
                />
                <el-switch
                  v-model="settings.showEmail"
                  active-text="显示邮箱"
                  inactive-text="隐藏邮箱"
                  inline-prompt
                  size="large"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 数据共享设置 -->
        <div v-show="activeNav === 'share'" class="setting-section">
          <h2 class="section-title">
            <el-icon><Share /></el-icon>
            数据共享管理
          </h2>

          <div class="setting-card danger-zone">
            <div class="setting-item">
              <label class="item-label">地理位置共享</label>
              <el-select
                v-model="settings.locationShare"
                class="danger-select"
                placeholder="请选择共享范围"
              >
                <el-option
                  v-for="item in locationOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  class="danger-option"
                />
              </el-select>
              <div class="item-tip">
                <el-icon class="tip-icon"><Position /></el-icon>
                控制地理位置信息的共享范围
              </div>
            </div>

            <div class="setting-item">
              <label class="item-label">第三方机构共享</label>
              <el-checkbox-group
                v-model="settings.platformSharing"
                class="danger-checkbox-group"
              >
                <el-checkbox
                  v-for="org in orgOptions"
                  :key="org.value"
                  :label="org.value"
                  border
                  class="danger-checkbox"
                >
                  <component :is="org.icon" class="checkbox-icon" />
                  {{ org.label }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>

        <!-- 紧急控制 -->
        <div v-show="activeNav === 'emergency'" class="setting-section">
          <h2 class="section-title">
            <el-icon><BellFilled /></el-icon>
            紧急隐私控制
          </h2>

          <div class="setting-card emergency-zone">
            <div class="setting-item">
              <label class="item-label">信息撤回机制</label>
              <div class="info-recall-buttons">
                <el-button
                  :type="settings.infoRecall === 'immediate' ? 'danger' : 'default'"
                  @click="settings.infoRecall = 'immediate'"
                  title="立即撤回：信息将立即被撤回"
                >
                  立即撤回
                </el-button>
                <el-button
                  :type="settings.infoRecall === 'review' ? 'danger' : 'default'"
                  @click="settings.infoRecall = 'review'"
                  title="审核撤回：信息撤回需经过审核"
                >
                  审核撤回
                </el-button>
                <el-button
                  :type="settings.infoRecall === 'trace' ? 'danger' : 'default'"
                  @click="settings.infoRecall = 'trace'"
                  title="追踪撤回：信息撤回后可追踪"
                >
                  追踪撤回
                </el-button>
              </div>
              <div class="item-tip emergency-tip">
                <el-icon class="tip-icon"><Clock /></el-icon>
                紧急情况下的信息撤回方式
              </div>
            </div>

            <div class="setting-item">
              <label class="item-label">数据删除请求</label>
              <div class="emergency-actions">
                <el-button
                  type="danger"
                  plain
                  @click="handleDataDelete('all')"
                  class="emergency-btn"
                >
                  <el-icon><Delete /></el-icon>
                  删除所有信息
                </el-button>
                <el-button
                  type="danger"
                  plain
                  @click="handleDataDelete('third')"
                  class="emergency-btn"
                >
                  <el-icon><Connection /></el-icon>
                  删除第三方共享
                </el-button>
              </div>
              <div class="item-tip emergency-tip">
                <el-icon class="tip-icon"><Warning /></el-icon>
                根据法律法规请求删除数据
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-bar">
      <el-button
        type="danger"
        @click="saveSettings"
        :loading="saving"
        class="save-btn"
      >
        <el-icon v-if="!saving"><Check /></el-icon>
        {{ saving ? '保存中...' : '保存隐私设置' }}
      </el-button>
      <el-button
        @click="resetConfirm"
        class="reset-btn"
        :disabled="saving"
      >
        <el-icon><Refresh /></el-icon>
        恢复安全默认
      </el-button>
    </div>

    <!-- 确认对话框 -->
    <el-dialog
      v-model="showResetDialog"
      title="确认重置设置"
      width="500px"
      class="danger-dialog"
    >
      <div class="dialog-content">
        <el-icon class="dialog-icon"><Warning /></el-icon>
        <h3>确定要重置所有隐私设置吗？</h3>
        <p class="dialog-tip">此操作将恢复所有设置到安全默认状态</p>
      </div>
      <template #footer>
        <el-button @click="showResetDialog = false">取消</el-button>
        <el-button type="danger" @click="resetSettings">确认重置</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import {
  Lock, InfoFilled, Share, Position,
  BellFilled, Delete, Connection, Check,
  Refresh, Warning, Clock, VideoCamera,
  CircleCheck, Opportunity
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ElMessageBoxOptions } from 'element-plus'

// 类型定义
type InfoLevel = 'full' | 'partial' | 'encrypted'
type LocationShare = 'none' | 'authorized' | 'all'
type RecallType = 'immediate' | 'review' | 'trace'
type DeleteType = 'all' | 'third'
type OrgType = 'police' | 'media' | 'ngo'

interface PrivacySettings {
  infoLevel: InfoLevel
  showPhone: boolean
  showEmail: boolean
  locationShare: LocationShare
  platformSharing: OrgType[]
  infoRecall: RecallType
}

interface NavItem {
  id: string
  label: string
  icon: any
}

interface LocationOption {
  value: LocationShare
  label: string
}

interface OrgOption {
  value: OrgType
  label: string
  icon: any
}

// 响应式状态
const settings = reactive<PrivacySettings>({
  infoLevel: 'partial',
  showPhone: false,
  showEmail: false,
  locationShare: 'none',
  platformSharing: ['police'],
  infoRecall: 'review'
})

const saving = ref(false)
const showResetDialog = ref(false)
const activeNav = ref('basic')

// 配置数据
const navItems: NavItem[] = [
  { id: 'basic', label: '信息显示', icon: InfoFilled },
  { id: 'share', label: '数据共享', icon: Share },
  { id: 'emergency', label: '紧急控制', icon: BellFilled }
]

const locationOptions: LocationOption[] = [
  { value: 'none', label: '不共享地理位置' },
  { value: 'authorized', label: '仅共享给警方' },
  { value: 'all', label: '共享给所有合作方' }
]

const orgOptions: OrgOption[] = [
  { value: 'police', label: '公安机关', icon: Opportunity },
  { value: 'media', label: '新闻媒体', icon: VideoCamera },
  { value: 'ngo', label: '公益组织', icon: CircleCheck }
]

// 默认安全设置
const defaultSettings: PrivacySettings = {
  infoLevel: 'partial',
  showPhone: false,
  showEmail: false,
  locationShare: 'none',
  platformSharing: ['police'],
  infoRecall: 'review'
}

// 加载设置
const loadSettings = () => {
  try {
    const saved = localStorage.getItem('missingPrivacySettings')
    if (saved) {
      const parsed = JSON.parse(saved)
      Object.assign(settings, validateSettings(parsed))
    }
  } catch (error) {
    ElMessage.error('设置加载失败，已恢复默认')
    localStorage.removeItem('missingPrivacySettings')
  }
}

// 验证设置有效性
const validateSettings = (data: any): PrivacySettings => {
  return {
    infoLevel: ['full', 'partial', 'encrypted'].includes(data.infoLevel)
      ? data.infoLevel : 'partial',
    showPhone: typeof data.showPhone === 'boolean' ? data.showPhone : false,
    showEmail: typeof data.showEmail === 'boolean' ? data.showEmail : false,
    locationShare: ['none', 'authorized', 'all'].includes(data.locationShare)
      ? data.locationShare : 'none',
    platformSharing: Array.isArray(data.platformSharing)
      ? data.platformSharing.filter((v: any) => ['police', 'media', 'ngo'].includes(v))
      : ['police'],
    infoRecall: ['immediate', 'review', 'trace'].includes(data.infoRecall)
      ? data.infoRecall : 'review'
  }
}

// 保存设置
const saveSettings = async () => {
  try {
    saving.value = true
    await simulateApiRequest(800)
    localStorage.setItem('missingPrivacySettings', JSON.stringify(settings))
    ElMessage.success('隐私设置已保存')
    logAction('settings_save', settings)
  } catch (error) {
    ElMessage.error('保存失败，请检查网络')
  } finally {
    saving.value = false
  }
}

// 数据删除处理
const handleDataDelete = async (type: DeleteType) => {
  try {
    const result = await ElMessageBox.prompt(
      `请输入删除${type === 'all' ? '全部' : '第三方'}数据的原因`,
      '删除确认',
      {
        inputType: 'textarea',
        inputPattern: /.{20,}/,
        inputErrorMessage: '至少输入20字说明原因',
        confirmButtonClass: 'danger-confirm',
        cancelButtonClass: 'danger-cancel',
        customClass: 'danger-dialog'
      } as ElMessageBoxOptions
    )

    if (result.value) {
      ElMessage.success(`已提交删除请求：${result.value}`)
      logAction('data_delete', { type, reason: result.value })
    }
  } catch (error) {
    console.log('删除操作取消')
  }
}

// 重置确认
const resetConfirm = () => {
  showResetDialog.value = true
}

// 执行重置
const resetSettings = () => {
  Object.assign(settings, defaultSettings)
  localStorage.removeItem('missingPrivacySettings')
  showResetDialog.value = false
  ElMessage.success('已恢复安全默认设置')
  logAction('settings_reset', null)
}

// 权限验证
// 操作日志记录
const logAction = (action: string, payload: any) => {
  const logEntry = {
    timestamp: new Date().toISOString(),
    action,
    payload,
    userAgent: navigator.userAgent
  }
  console.log('操作日志:', logEntry)
}

// 模拟API请求
const simulateApiRequest = (delay: number) => {
  return new Promise(resolve => setTimeout(resolve, delay))
}

// 初始化加载
onMounted(() => {
  loadSettings()
  logAction('page_load', null)
})
</script>

<style lang="scss" scoped>
.missing-privacy-container {
  --danger-main: #ff4d4f;
  --danger-light: #ff7875;
  --danger-bg: #fff1f0;
  --danger-border: #802d24;
  --danger-text: #cf1322;
  --danger-shadow: rgba(255, 77, 79, 0.1);

  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 24px;
  position: relative;

  .module-header {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    border-bottom: 2px solid var(--danger-border);
    padding-bottom: 16px;

    .header-icon {
      color: var(--danger-main);
      font-size: 32px;
      margin-right: 12px;
    }

    h1 {
      color: var(--danger-text);
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    .sensitivity-tag {
      margin-left: 20px;
      font-size: 14px;
      transform: translateY(-2px);
      letter-spacing: 1px;
    }
  }

  .privacy-main {
    display: flex;
    gap: 24px;
    min-height: 450px;

    .setting-nav {
      width: 150px;
      border-right: 1px solid var(--danger-border);
      padding-right: 24px;

      .nav-item {
        padding: 15px 10px;
        margin-bottom: 8px;
        border-radius: 6px;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        border: 1px solid var(--danger-border);
        color: var(--el-text-color-regular);
        font-size: 16px;
        white-space: nowrap;
        .nav-label {
          font-size: inherit;
        }
        .nav-icon {
          color: var(--danger-main);
          margin-right: 12px;
          transition: color 0.3s;
        }

        &:hover {
          background: var(--danger-bg);
          color: var(--danger-text);
          transform: translateX(4px);
        }

        &.active {
          background: linear-gradient(
              to right,
              var(--danger-main),
              #ff7875
          );
          color: white;
          font-weight: 500;
          box-shadow: 0 2px 8px var(--danger-shadow);

          .nav-icon {
            color: white;
          }
        }
      }
    }

    .setting-content {
      flex: 1;
      min-width: 0;

      .section-title {
        color: var(--danger-text);
        display: flex;
        align-items: center;
        margin: 0 0 15px;
        font-size: 20px;
        font-weight: 600;

        .el-icon {
          margin-right: 12px;
          font-size: 24px;
        }
      }

      .setting-card {
        border-radius: 8px;
        padding: 24px;
        margin-bottom: 24px;
        transition: box-shadow 0.3s;

        &.danger-zone {
          border: 2px solid var(--danger-border);
          box-shadow: 0 4px 12px var(--danger-shadow);

          &:hover {
            box-shadow: 0 6px 16px rgba(255, 77, 79, 0.15);
          }
        }

        &.emergency-zone {
          border: 2px solid #ffa39e;
          box-shadow: 0 4px 12px rgba(255, 163, 158, 0.1);
        }

        .setting-item {
          margin-bottom: 32px;
          position: relative;

          .item-label {
            display: block;
            color: var(--danger-text);
            font-weight: 500;
            margin-bottom: 16px;
            font-size: 18px;
            padding-left: 8px;
            border-left: 3px solid var(--danger-main);
          }

          .switch-group {
            display: flex;
            gap: 40px;
            margin-top: 8px;
          }

          .item-tip {
            color: var(--danger-light);
            font-size: 13px;
            margin-top: 12px;
            display: flex;
            align-items: center;
            line-height: 1.5;
            padding: 8px 12px;
            background: var(--detail-section-background);
            border-radius: 4px;

            .tip-icon {
              margin-right: 8px;
              font-size: 16px;
              flex-shrink: 0;
            }

            &.emergency-tip {
              color: #ff6969;
              background: var(--detail-section-background);
              border: 1px solid #ffccc7;
            }
          }

          .emergency-actions {
            display: flex;
            gap: 16px;
            margin-top: 8px;
          }
        }
      }
    }
  }

  .action-bar {
    margin-top: 32px;
    border-top: 1px solid var(--danger-border);
    padding-top: 24px;
    text-align: center;

    .save-btn {
      padding: 14px 48px;
      font-size: 16px;
      font-weight: 500;
      transition: transform 0.2s;

      &:hover {
        transform: translateY(-1px);
      }

      .el-icon {
        margin-right: 8px;
        font-size: 18px;
      }
    }

    .reset-btn {
      margin-left: 24px;
      border-color: var(--danger-border);
      color: var(--danger-light);
      transition: all 0.3s;

      &:hover {
        color: var(--danger-main);
        border-color: var(--danger-main);
        background: var(--danger-bg);
      }
    }
  }
}

/* 组件样式覆盖 */
:deep(.danger-radio-group) {
  display: flex;
  gap: 8px;

  .el-radio-button {
    flex: 1;
    margin-right: 0;

    .el-radio-button__inner {
      border-color: var(--danger-light);
      color: var(--danger-text);
      transition: all 0.3s;

      &:hover {
        border-color: var(--danger-main);
        color: var(--danger-main);
      }
    }

    &.is-active {
      .el-radio-button__inner {
        background: var(--danger-main);
        border-color: var(--danger-main);
        box-shadow: none;
      }
    }
  }
}

:deep(.danger-select) {
  width: 320px;

  .el-input__wrapper {
    border-radius: 6px;
    border: 1px solid var(--danger-light);
    background: white;
    box-shadow: none;
    transition: border-color 0.3s;

    &:hover {
      border-color: var(--danger-main);
    }

    &.is-focus {
      border-color: var(--danger-main);
      box-shadow: 0 0 0 1px var(--danger-main) inset;
    }
  }
}

:deep(.danger-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  .el-checkbox {
    margin: 0;
    --el-checkbox-border-color: var(--danger-border);
    --el-checkbox-checked-border-color: var(--danger-main);
    --el-checkbox-checked-bg-color: #f5222d;
    --el-checkbox-checked-input-border-color: #f5222d;
    --el-checkbox-checked-text-color: var(--danger-text);
    --el-checkbox-input-border-color-hover: #f5222d;
    .el-checkbox__label {
      display: flex;
      align-items: center;
    }

    .checkbox-icon {
      margin-right: 8px;
      font-size: 16px;
      color: var(--danger-light);
    }

    &.is-checked {
      border-color: var(--danger-main);

      .checkbox-icon {
        color: var(--danger-main);
      }
    }
  }
}

:deep(.danger-dialog) {
  border-radius: 12px;
  overflow: hidden;

  .el-dialog__header {
    background: var(--danger-bg);
    margin-right: 0;
    padding: 20px 24px;

    .el-dialog__title {
      color: var(--danger-text);
      font-weight: 600;
    }
  }

  .dialog-content {
    text-align: center;
    padding: 24px 32px;

    .dialog-icon {
      color: var(--danger-main);
      font-size: 48px;
      margin-bottom: 16px;
    }

    h3 {
      color: var(--danger-text);
      margin: 12px 0;
      font-size: 18px;
    }

    .dialog-tip {
      color: var(--danger-light);
      font-size: 13px;
      line-height: 1.5;
    }
  }

  .el-dialog__footer {
    border-top: 1px solid var(--danger-border);
    padding: 16px 24px;
  }
}

/* 响应式设计 */
@media (max-width: 992px) {
  .missing-privacy-container {
    margin: 10px;
    padding: 16px;

    .privacy-main {
      flex-direction: column;

      .setting-nav {
        padding-right: 24px;
        border-right: none;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 16px;

        .nav-item {
          padding: 15px 10px;
          margin-bottom: 8px;
          border-radius: 6px;
          justify-content: center;
        }
      }

      .setting-content {
        .section-title {
          font-size: 18px;
        }

        .setting-card {
          padding: 16px;

          .setting-item {
            margin-bottom: 24px;

            .item-label {
              font-size: 14px;
            }

            :deep(.danger-select) {
              width: 100%;
            }
          }
        }
      }
    }

    .action-bar {
      padding-top: 16px;

      .save-btn,
      .reset-btn {
        width: 100%;
        margin-left: 0;
        margin-bottom: 12px;
      }
    }
  }
}

@media (max-width: 576px) {
  .missing-privacy-container {
    .module-header {
      flex-direction: column;
      align-items: flex-start;

      h1 {
        font-size: 20px;
      }

      .sensitivity-tag {
        margin-left: 0;
        margin-top: 8px;
      }
    }

    .privacy-main {
      .setting-nav {
        grid-template-columns: 1fr;
      }

      .setting-content {
        .setting-card {
          .setting-item {
            .switch-group {
              flex-direction: column;
              gap: 16px;
            }

            .emergency-actions {
              flex-direction: column;
            }
          }
        }
      }
    }
  }
}


:deep(.el-switch) {

  &.is-checked .el-switch__core {
    background-color: #ff4d4f; // 激活状态的核心部分颜色
  }

  &.is-checked .el-switch__core {
    border-color: #ff4d4f; // 激活状态的边框颜色
  }

  .el-switch__core {
    background-color: #ffccc7; // 非激活状态的核心部分颜色
  }

}
</style>
